<template>
  <div class="container">
    <div class="mb10">
      <el-text class="mx-1"> 查询条件：</el-text>
    </div>
    <el-row :gutter="10">
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.master_id" placeholder="请选择商务" clearable class="">
          <el-option v-for="item in businessAffairsList" :label="item.nick_name" :value="item.id" :key="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-select v-model.trim="searchCondition.rent_staff_uid" placeholder="请选择业务员" clearable class="">
          <el-option v-for="item in rentSalesmanList" :label="item.username" :value="item.user_id" :key="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-input placeholder="请选择绑定的店铺" disabled v-model="searchCondition.store_name" clearable>
          <template #append>
            <el-button :icon="CircleClose" @click="handleClearStoreInfo"></el-button>
            <el-button :icon="Search" @click="handleSelectStore">去选择</el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24" class="mb10">
        <el-select v-model.trim="searchCondition.shop_level" placeholder="店铺等级" clearable class="">
          <el-option v-for="item in shopLevelList" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-date-picker v-model="queryDate" type="datetimerange" range-separator="至" format="YYYY-MM-DD HH:mm:ss" value-format="x" start-placeholder="回访开始时间" @change="changeQueryDate" end-placeholder="回访结束时间"> </el-date-picker>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24">
        <el-space wrap>
          <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
          <el-button type="warning" :icon="Refresh" :disabled="disabledbtn" @click="resetSearch">重置</el-button>
        </el-space>
      </el-col>
    </el-row>
    <div class="mb10">
      <el-text class="mx-1"> 查询结果：</el-text>
    </div>
    <el-space wrap class="mb20">
      <el-button type="primary" :icon="Download" class="mr10" :disabled="disabledbtn" v-permission="'export'" @click="handlePutBusinessAffairsRecordExportInfo">导出</el-button>
    </el-space>
    <el-space wrap class="mb20"> </el-space>
    <el-table :data="tableList" border class="table" row-key="id" ref="multipleTableRef" v-loading="loading" :reserve-selection="true" @row-dblclick="rowDblclick">
      <el-table-column type="index" align="center"></el-table-column>
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="master.nick_name" label="商务" align="center"></el-table-column>
      <el-table-column prop="store.rentStaff.contacts_name" label="业务员" align="center"></el-table-column>
      <el-table-column prop="store.store_name" label="店铺" align="center"></el-table-column>
      <el-table-column prop="store.store_phone" label="店铺电话" align="center"></el-table-column>
      <el-table-column prop="store.store_name" label="店铺等级" align="center">
        <template #default="scope">
          <div class="ibDraggable">
            <div v-if="scope.row.store.storeInfo">{{ scope.row.store.storeInfo.shop_level }}</div>
            <div v-else>---</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="record" label="回访记录" align="center"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center" :formatter="(row: IFollowVisitRecordInfoVO) => handleVerifyFormatDate(row.create_time)"> </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @update:current-page="handleCurrentChange"
        @update:page-size="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="searchCondition.size"
        :current-page="searchCondition.current"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :total="total"
        :hide-on-single-page="false">
      </el-pagination>
    </div>
    <!-- 选择店铺 -->
    <SelectStoreDialog v-model:edit-visible="storeVisible" @handleSuccess="handleSelectedData" />
  </div>
</template>

<script setup lang="ts">
import SelectStoreDialog from "@/components/user/storeManager/storeInfo/SelectStoreDialog.vue";
import { Search, Refresh, CircleClose, Download } from "@element-plus/icons-vue";
import { exportExcel, handleVerifyFormatDate } from "@/utils/utils";
import { useState } from "@/hooks/useState.ts";
import type { IRentStaff } from "@/types/staff/rentStaff";
import type { IStoreInfoList } from "@/types/storeManager/store";
import type { IDictData } from "@/types/dict";
import type { IFollowVisitRecordInfoVO, ISearchFollowVisitRecordInfo } from "@/types/followVisitRecordInfo";
import type { ISimpleUser } from "@/types/user";
import { getBusinessAffairsRecordInfo, putBusinessAffairsRecordExportInfo } from "@/utils/api/businessAffairsRecord";
const route = useRoute();
const { disabledbtn, loading, toggleState } = useState();
interface Props {
  rentSalesmanList: Array<IRentStaff>;
  shopLevelList: Array<IDictData>;
  businessAffairsList: Array<ISimpleUser>;
}
const { rentSalesmanList, shopLevelList, businessAffairsList } = defineProps<Props>();

/* 暴露一个方法给父组件使用 */
defineExpose({
  getTableInfo
});
/* 显示隐藏选择店铺 */
const storeVisible = ref<boolean>(false);
const multipleTableRef = useTemplateRef("multipleTableRef"); /* 列表组件的引用 */
const total = ref(0);
const searchCondition = reactive<ISearchFollowVisitRecordInfo>({
  start_time: "",
  end_time: "",
  master_id: "",
  rent_staff_uid: "",
  store_id: "",
  store_name: "",
  shop_level: "",
  current: 1,
  size: 10
});

const tableList = ref<Array<IFollowVisitRecordInfoVO>>([]);
const queryDate = ref<Array<string>>([]);

/* 查询 创建时间更改事件 */
function changeQueryDate(data: number[]) {
  if (data !== null) {
    searchCondition.start_time = data[0];
    searchCondition.end_time = data[1];
  } else {
    searchCondition.start_time = "";
    searchCondition.end_time = "";
  }
}
/* 搜索 */
function searchInfo() {
  searchCondition.current = 1;
  searchCondition.size = 10;
  getTableInfo();
}

/**
 * 重置搜索内容
 */
function resetSearch() {
  searchCondition.master_id = "";
  searchCondition.rent_staff_uid = "";
  searchCondition.store_id = "";
  searchCondition.store_name = "";
  searchCondition.shop_level = "";
  searchCondition.start_time = "";
  searchCondition.end_time = "";
  queryDate.value = [];
  searchInfo();
}

/* 请求：获取表格中数据 */
function getTableInfo() {
  toggleState(true);
  getBusinessAffairsRecordInfo<IFollowVisitRecordInfoVO, ISearchFollowVisitRecordInfo>(searchCondition)
    .then(res => {
      tableList.value = res.result.data;
      total.value = res.result.total;
    })
    .finally(() => {
      toggleState(false);
    });
}

/* 显示第几页 */
function handleCurrentChange(val: number) {
  searchCondition.current = val;
  getTableInfo();
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  searchCondition.size = val;
  getTableInfo();
}

/* 双击当前行 */
function rowDblclick(row: IFollowVisitRecordInfoVO) {
  multipleTableRef.value!.toggleRowSelection(row);
}

/* 选择店铺 */
function handleSelectStore() {
  storeVisible.value = true;
}
/* 清除店铺选择数据 */
function handleClearStoreInfo() {
  if (searchCondition.store_id == "") return;
  searchCondition.store_id = "";
  searchCondition.store_name = "";
  getTableInfo();
}
/* 选择选中的店铺数据 */
function handleSelectedData(list: IStoreInfoList[]) {
  searchCondition.store_id = list[0].id;
  searchCondition.store_name = list[0].store_name;
  getTableInfo();
}

/* 导出文件 */
function handlePutBusinessAffairsRecordExportInfo() {
  toggleState(true);
  putBusinessAffairsRecordExportInfo(searchCondition)
    .then((res: Blob) => {
      ElMessage.success("请稍后，正在下载中...");
      exportExcel(res, "商务回访记录信息" + new Date().getTime());
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

onMounted(() => {
  if (route.query.store_id == undefined) {
    getTableInfo();
  }
});
onActivated(() => {
  if (route.query.store_id !== undefined) {
    if (route.query.store_id !== searchCondition.store_id) {
      searchCondition.store_id = route.query.store_id as string;
      searchCondition.store_name = route.query.store_name as string;
      getTableInfo();
    }
  }
});
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-col {
  border-radius: 4px;
}

.mb10 {
  margin-bottom: 10px;
}
/* 关键：列表右侧操作按钮的对其 */
:deep(.el-space__item) {
  line-height: 15px;
}

.el-button.is-text + .el-button.is-text {
  margin-left: 0;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}
.textAlignCenter {
  text-align: center;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}

/* 修改Switch开关 */
.el-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* 修改select的盒模型 */
.el-select {
  display: block;
}
.orange {
  color: #e6a23c;
}
</style>
